<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader
    @addFn='addFn'
    :list='list'
    ></TodoHeader>
    <TodoMain 
    :list='showList'
    @del='delFn'
    ></TodoMain>
    <TodoFooter
     :list='list'
     @clear='clear'
     :type='type'
     @changeType='changeType'
    ></TodoFooter>
  </section>
</template>

<script>
// 1.0 样式引入
import "./styles/base.css"
import "./styles/index.css"
    
import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";


export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
     type:'all',
     list: JSON.parse(localStorage.getItem('list')) || [] //将本地的数组 取回 再判断 如果本地没数据，给一个空数组
    };
  },
  methods:{
    delFn(id){
      this.list = this.list.filter(item=>id !==item.id)  //根据子组件传过来的id 通过数组filter方法筛选数组
    },
    addFn(words){
      this.list.push(
      {id: this.list.at(-1)?this.list.at(-1).id+1 :0,
       name: words,
        isDone: false},  //根据子组件传过来的用户输入的文字,添加数组,数组at方法(值为-1)
      //代表数组的最后一项
      )
    },
    clear(){
      this.list =  this.list.filter(item=>!item.isDone)  //根据子传父,过滤数组,将isDone为true的过滤掉
    },
    changeType(type){    //从子传过来type,表示点了全部 未完成 已完成中的一个，然后将type的值 改为 子组件传过来的type值
      this.type = type
    }
   
  },
   watch:{
    list:{
       deep:true,
       immediate:true,
       handler(newVal){
        
          localStorage.setItem('list',JSON.stringify(newVal)) 
        //监听数组,一有变化就将数组 转化为JSON字符串 存到本地
       }
    }
   },
   computed:{
         showList(){
           if(this.type == 'all') {     //判断type值 如果type值为all,返回原数组,如果为yes,返回筛选isDone为true的数组,如果为no,返回筛选isDone为false的数组，showList来接受返回的数组
              return this.list
           }
           else if(this.type =='yes') {
             return this.list.filter(item=>item.isDone)
           }
           else{
            return this.list.filter(item => item.isDone ==false)
           }
         }
   }
};
</script>